'use strict';
import React, {PropTypes} from 'react';
import {
    View,
    Image,
    StyleSheet,
    TouchableOpacity,
    Text,
    TextInput,
} from 'react-native';

const styles = StyleSheet.create({
    container: {
        marginTop: 15,
        height: 50,
        flexDirection: 'row',
        alignItems: 'center',
        borderBottomWidth: 1,
        borderBottomColor: '#DADADA',
        paddingRight: 70
    },
    touchableContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        height: 50,
    },
    image: {
        width: 20,
        height: 20,
        marginLeft: 20,
        marginRight: 20,
        marginTop: 1,
    },
    text: {
        fontSize: 18,
        color: '#666',
    },
    inputBox: {
        flex: 1,
        flexDirection: 'row',
        backgroundColor: '#F2F3F5',
        borderRadius: 5,
        alignItems: 'center',
        height: 35,
        padding: 3,
    },
    icon15: {
        width: 15,
        height: 15,
        marginRight: 5,
        marginLeft: 2,
    },
    cancelText: {
        fontSize: 16,
        color: '#38D68B',
    }
});

class FoundPageTabBar extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            showFound: false,
            search: '',
        };
        this.onFoundPress=this.onFoundPress.bind(this);
    }

    onFoundPress(showFound) {
        const {
            onFoundPress,
        } = this.props;
        this.setState({showFound: !showFound});
        onFoundPress(this.state.showFound)
    }

    render() {
        const {
            tabBarNames,
            activeTab,
            tabs,
            goToPage,
            searchFun,
        } = this.props;
        return (
            <View>
                <View style={styles.container}>
                    <TouchableOpacity onPress={(showFound) => this.onFoundPress(this.state.showFound)}>
                        <Image style={styles.image} source={require('../../Image/search_green.png')}
                               resizeMode={'contain'}/>
                    </TouchableOpacity>
                    {tabs.map((tab, index) => {
                        let height = activeTab === index ? 3 : 0;
                        let color = activeTab === index ? '#38D68B' : '#666';
                        return (
                            <TouchableOpacity
                                style={{flex: 1}}
                                key={index}
                                onPress={() => goToPage(index)}>
                                <View
                                    style={styles.touchableContainer}>
                                    <Text style={[styles.text, {color}]}>
                                        {tabBarNames[index]}
                                    </Text>
                                    <View
                                        style={{
                                            height,
                                            backgroundColor: '#38D68B',
                                            position: 'absolute',
                                            bottom: 0,
                                            left: 15,
                                            right: 15,
                                        }}/>
                                </View>
                            </TouchableOpacity>
                        )
                    })}
                </View>
                {
                    this.state.showFound ?
                        <View style={[styles.container, {
                            marginTop: 0,
                            padding: 5,
                            paddingRight: 10,
                            paddingLeft: 10,
                        }]}>
                            <View style={styles.inputBox}>
                                <Image style={styles.icon15} source={require('../../Image/search_icon.png')}/>
                                <TextInput
                                    placeholder={'请输入要搜索的内容'}
                                    underlineColorAndroid={'rgba(0,0,0,0)'}
                                    maxLength={15}
                                    style={{fontSize: 13, flex: 1, padding: 0}}
                                    returnKeyType={'search'}
                                    blurOnSubmit={true}
                                    value={this.state.search}
                                    onChangeText={(search) => this.setState({ search })}
                                    onSubmitEditing={()=>searchFun(this.state.search)}
                                />
                            </View>
                            <TouchableOpacity
                                style={{
                                    marginLeft: 10,
                                    padding: 5,
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                }} onPress={(showFound) => this.onFoundPress(this.state.showFound)}>
                                <Text style={styles.cancelText}>取消</Text>
                            </TouchableOpacity>
                        </View>
                        : null
                }
            </View>
        )
    }
}

FoundPageTabBar.propTypes = {
    tabBarNames: PropTypes.array.isRequired,
};

export default FoundPageTabBar;